<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/commons/taglibs.jsp" %>

<style type="text/css">
#play img {border:0px}
#play {width:934px;height:221px;overflow:hidden;margin: 12px 0px 0px 13px;position: absolute;}
#play_info{text-align:left;position:absolute;margin-top:181px;padding:8px 0px 0px 10px;height:32px;width:924px;color:#cccccc;z-index:1001;cursor:pointer}
#play_info b{font-size:14px;display:block}
#play_bg {position:absolute;background-color:#000;margin-top:181px;height:40px;width:934px;filter: Alpha(Opacity=40);opacity:0.4;z-index:1000}
#play_text {position:absolute;right:0px;top:181px;height:40px;width:150px;z-index:1002;}
#play_text ul {list-style:none;height:40px;padding: 0px ;margin: 0px;}
#play_text ul li {list-style:none;float:left;margin:0px;cursor:pointer;font-size: 12px;padding:0px 0px 0px 10px;}
#play_list{overflow: hidden; position: relative; margin: 0;padding: 0;width:934px;height:221px;}
.slider{position:absolute;}
.slider li{ list-style:none;display:inline;}
.slider img {width:934px;height:221px;display:block;}
</style>

<div id="play">	
	<div id="play_bg"></div>
	<div id="play_info"></div>
	<div id="play_text">
		<ul>
			 <li><img src="${ctx }/images/1A.gif" width="40" height="40" id="ad_img_1"/></li>
			 <li><img src="${ctx}/images/2A.gif" width="40" height="40" id="ad_img_2"/></li>
			 <li><img src="${ctx}/images/3A.gif" width="40" height="40" id="ad_img_3"/></li>
		</ul>
	</div>

	<div id="play_list">
		<ul class="slider">
			<c:forEach items="${advertisementList}" var="advertise" varStatus="status">
				<c:choose>
					<c:when test="${advertise.linkAddress != null && advertise.linkAddress != ''}">
						<li><a target="_blank" href="${advertise.linkAddress }">
					</c:when>
					<c:otherwise><a href="#"></c:otherwise>
				</c:choose>
					<img width="934" height="221" src="${advertise.imagepath}" title="" alt="${advertise.title }" />
				</a></li>
			</c:forEach>
		</ul>
	</div>
</div>
<script type="text/javascript">

$(function(){
	var count = $("#play_list a").size();
	$("#play_info").html($("#play_list a").find("img").attr('alt'));
	$("#play_text li:first-child").find("img").attr("src","${ctx}/images/1B.gif");

    var adTimer;//计时器
    var i = 0;  //li 序号
	$("#play_text li").mouseover(function() {
		i = $("#play_text li").index($(this));
		if (i >= count) return;
		$("#play_info").html($("#play_list a").eq(i).find("img").attr('alt'));
		showImg(i);
	}).eq(0).mouseover();

    //滑入 停止动画，滑出开始动画.
    $('#play_list').hover(function(){
            clearInterval(adTimer);
        },function(){
            adTimer = setInterval(function(){
               $("#play_info").html($("#play_list a").eq(i).find("img").attr('alt'));
               showImg(i);
               i++;
               if(i == count){i=0;}
             } , 8000);
    }).trigger("mouseleave");
});

//通过控制top ，来显示不同的幻灯片
function showImg(index){
    var adHeight=$("#play_list").height();
    $(".slider").stop(true,false).animate({top: -adHeight*index},400);
    changeNumState(index);
}
//改变数字序号的状态
function changeNumState(i){
	if(i == 0){
		$("#play_text li").eq(i).find("img").attr("src","${ctx}/images/1B.gif");
		$("#ad_img_2").attr("src","${ctx}/images/2A.gif");
		$("#ad_img_3").attr("src","${ctx}/images/3A.gif");
	}
	else if(i==1){
		$("#play_text li").eq(i).find("img").attr("src","${ctx}/images/2B.gif");
		$("#ad_img_1").attr("src","${ctx}/images/1A.gif");
		$("#ad_img_3").attr("src","${ctx}/images/3A.gif");
	}else{
		$("#play_text li").eq(i).find("img").attr("src","${ctx}/images/3B.gif");
		$("#ad_img_1").attr("src","${ctx}/images/1A.gif");
		$("#ad_img_2").attr("src","${ctx}/images/2A.gif");
	}
}
</script>
